<script lang="ts" setup>
// global.d.ts中已经对PIE3D进行了全局的类型声明，此处是为了导入类型
import type * as PIE3DType from 'pie3d-core'

let colorPatternGradientLayer: PIE3DType.ColorPatternGradientLayer | undefined
// 图例
const legendImg = ref<string>()
// test component popup
const componentRootDiv = ref<HTMLDivElement>()
// 响应式数据，用于接收openPopup事件的数据返回值
const data = ref<any>({
  name: '',
  address: '',
})
// 关闭窗口的方法
function close() {
  colorPatternGradientLayer?.popup?.close()
}
onMounted(async () => {
  // #region 创建Earth类 ********************************************************************************
  const earth = new PIE3D.Earth(
    'cesiumContainer',
    {
      baseLayerPicker: true,
    },
    {
      zoomButton: true,
    },
  )
  earth.viewer.scene.globe.baseColor = PIE3D.Cesium.Color.BLACK.withAlpha(0)
  // #endregion *************************************************************************************

  // #region 创建colorPatternGradient图层 ********************************************************************************
  colorPatternGradientLayer = new PIE3D.ColorPatternGradientLayer({
    id: 'test-colorPatternGradient',
    name: 'test-colorPatternGradient-name',
    flyTo: true,
    rectangle: [60, -10, 150, 60],
    height: 0,
    aboveGround: true,
    colorRamp: [
      {
        color: '#1dff74',
        value: -40,
      },
      {
        color: '#67fe20',
        value: -36,
      },
      {
        color: '#8aff54',
        value: -32,
      },
      {
        color: '#9eff6c',
        value: -28,
      },
      {
        color: '#aaff83',
        value: -24,
      },
      {
        color: '#b8ff98',
        value: -20,
      },
      {
        color: '#d7fe97',
        value: -16,
      },
      {
        color: '#fcfc98',
        value: -12,
      },
      {
        color: '#fee168',
        value: -8,
      },
      {
        color: '#ffdc59',
        value: -4,
      },
      {
        color: '#ffcc04',
        value: 0,
      },
      {
        color: '#feba01',
        value: 4,
      },
      {
        color: '#faa600',
        value: 8,
      },
      {
        color: '#ff8a00',
        value: 12,
      },
      {
        color: '#f7740a',
        value: 16,
      },
      {
        color: '#fd5c14',
        value: 20,
      },
      {
        color: '#ff4432',
        value: 24,
      },
      {
        color: '#ff3610',
        value: 28,
      },
      {
        color: '#f4272f',
        value: 32,
      },
      {
        color: '#cd1320',
        value: 36,
      },
      {
        color: '#9e0007',
        value: 40,
      },
      {
        color: '#760006',
        value: 41,
      },
    ],
    uniformOptions: {
      alpha: 0.8,
      // src文件夹下的资源导入，会经过vite打包处理
      // image: (await import('./assets/images/tempreatrue.png')).default,
      // 或者使用public文件夹下的静态资源
      image: '/images/tempreatrue.png',
    },
    popup: {
      direction: 'top',
      entity: true,
      contentType: 'component',
      componentElement: componentRootDiv.value,
      getData: (position) => {
        const result = {
          name: '航天宏图',
          address: '中国北京',
        }
        data.value = result
        return result
      },
    },
  })
  earth.addLayer(colorPatternGradientLayer)
  await colorPatternGradientLayer.addedPromise()
  legendImg.value = colorPatternGradientLayer.getLegendImage()
  // #endregion *************************************************************************************
})
</script>

<template>
  <div class="h-full">
    <div class="absolute z-1 bg-red px-10px py-4px">
      示例 / 色斑晕染图层
    </div>
    <img
      :src="legendImg"
      class="absolute bottom-100px left-50% z-1 translate-x--50%"
    >
    <div id="cesiumContainer" class="h-full" />
    <!-- 测试自定义组件形式的popup窗口 -->
    <div ref="componentRootDiv" class="absolute hidden bg-black p-20px">
      <div
        class="i-ep:close absolute right-0 top-0 h-20px w-20px color-#fff"
        @click="close"
      />
      <div class="color-red">
        名称: {{ data.name }}
      </div>
      <div class="color-green">
        地址: {{ data.address }}
      </div>
    </div>
  </div>
</template>
